<template>
  <div class="main-part" ref="main">
    <div class="part-top">
      <div class="part-top-left">
        <div class="text">品类: 男衬衫长袖</div>
        <div class="text">编码: 0001</div>
        <div class="text">
          客户:
          <div class="reset-part line-feed else">
            <div class="reset overOne">{{customerStores.selCustomer.name}}</div>
          </div>
        </div>
      </div>
      <div class="part-top-right">
        <!-- <div class="text thumb">单品提交</div>
        <div class="text thumb">暂存订单</div>
        <router-link to="/cart/index" class="text thumb">加入购物车</router-link> -->
        <Popconfirm  class="font-normal">
        <div class="text del thumb font-bold" >删除</div>
        </Popconfirm>
        <div :class="['text', 'icon', 'thumb', open ? `open` : `close`]">
          <img
            :title="open ? `收起` : `展开`"
            :src="publicUrl(`/images/big-up.png`)"
            @click="openClick"
          />
        </div>
      </div>
    </div>

    <div class="content" ref="content" :style="{ height: height }">
      <div class="content-left" v-show="step < 3">
        <img v-lazy="publicUrl('/images/mtm-shirt.jpg')" />
      </div>
      <div class="content-right">
        <StepList :step="step" />
        <Step
          ref="stepRef"
          :step="step"
          @step-change="stepChange"

        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, nextTick, watch } from "vue";
import { publicUrl } from "@/utils/util";
import StepList from "./components/StepList/index.vue";
import {
  useElementSize,
  watchThrottled,
} from "@vueuse/core";
import Step from "./components/Step/index.vue";
import { Customer as CustomerStores } from "@/stores/modules/Customer";
import Popconfirm from "@/components/Popconfirm/index.vue";

const customerStores = CustomerStores();
const open = ref<boolean>(true);
const content = ref<any>(undefined);
const main = ref<any>(undefined);
const height = ref<string>("auto");

const stepRef = ref<any>();

var heightDefault: number = 0;

const { width: contentWidth } = useElementSize(content);
const { height: stepHeight } = useElementSize(stepRef);

const ratio: number = 7.572852233676976; //2000 / 291 该比例用于切换下一步时锁定屏幕高度
const offsetTop = ref<number>(document.body.clientWidth / ratio);

// 2000                1500    1200
// 291                 220     176
 

watch(()=>stepHeight.value,()=>{
  resetHeight();
})


watchThrottled(
  () => contentWidth.value,
  () => {
    offsetTop.value = document.body.clientWidth / ratio;
    resetHeight();
  },
  { throttle: 200 }
);

const resetHeight = () => {
  height.value = "auto";
  nextTick(() => {
    height.value = content.value.clientHeight + "px";
    heightDefault = content.value.clientHeight;
    if (open.value === false) height.value = "0px";
  });
};

const openClick = () => {
  open.value = !open.value;
  height.value = open.value ? heightDefault + "px" : "0px";
};

const step = ref<number>(1);  //初始步数
watch(
  () => step.value,
  () => {
    if (
      document.documentElement.scrollTop >
      main.value.offsetTop + offsetTop.value
    )
      document.documentElement.scrollTop =
        main.value.offsetTop + offsetTop.value;
  }
);

const stepChange = (num: number) => {
  step.value = num;
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
